<template>
  <el-table :data="pageInfo.list" border style="font-size: 11px;" :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ 'text-align': 'center' }">
    <el-table-column prop="id" label="订单编号"/>
    <el-table-column prop="user.username" label="用户名"/>
    <el-table-column prop="createTime" label="创建时间"/>
    <el-table-column prop="addrDetail" label="地址"/>
    <el-table-column prop="payType" label="支付方式">
      <template #default="scope">
        <el-tag type="primary" v-if="scope.row.payType === 0">余额</el-tag>
        <el-tag type="warning" v-if="scope.row.payType === 1">支付宝</el-tag>
        <el-tag type="success" v-if="scope.row.payType === 2">微信</el-tag>
        <el-tag type="primary" v-if="scope.row.payType === 3">银联</el-tag>
        <el-tag type="success" v-if="scope.row.payType === 4">其他</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="商品详情" width="100px">
      <template #default="scope">
        <el-popover placement="right" width="600px" trigger="hover" style="display: flex; align-items: center">
          <template #reference>
            <el-button size="small" type="success" @mouseenter="selectById(scope.row.id)">查看商品</el-button>
          </template>
          <el-table :data="orderList" style="max-height: 400px; overflow: auto;">
            <el-table-column width="150" property="goods.name" label="名称"/>
            <el-table-column width="100" label="图片">
              <template #default="scope">
                <el-image fit="contain" style="width: 50px; height: 50px"
                          :src="`${SERVER_ADDR}/goods/pic/${scope.row.goods.picList[0].url}`"
                          @mouseente="console.log(`${SERVER_ADDR}/goods/pic/${goods.picList[0].url}`)"/>
              </template>
            </el-table-column>
            <el-table-column width="80" property="goods.color" label="颜色"/>
            <el-table-column width="60" property="goods.version" label="版本"/>
            <el-table-column width="60" property="count" label="数量"/>
            <el-table-column width="80" property="goods.price" label="价格"/>

            <el-table-column width="60" label="评价">
              <template #default="scope">
                <el-button type="text" v-if="idstatus!==3" @click="toCommentPage(scope.row.id)" disabled>评价
                </el-button>
                <el-button type="text" v-else @click="toCommentPage(scope.row.id)">评价</el-button>
              </template>
            </el-table-column>

          </el-table>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="订单状态">
      <template #default="scope">
        <el-button size="small" type="text" v-if="scope.row.status === 0" @click="toPayPage(scope.row.id)">立即付款
        </el-button>
        <el-button size="small" type="success" v-if="scope.row.status === 1">已支付(等待发货)</el-button>
        <el-button size="small" type="primary" @click="updateStatus(scope.row.id)" v-if="scope.row.status === 2">
          已发货(点击收货)
        </el-button>
        <el-button size="small" type="danger" v-if="scope.row.status === 3"
                   @click="begin(scope.row.id)">
          已收货(点击服务)
        </el-button>
        <el-button size="small" type="warning" v-if="scope.row.status === 4">退货退款</el-button>
        <el-button size="small" type="success" v-if="scope.row.status === 5">退换货</el-button>
        <el-button size="small" type="success" v-if="scope.row.status === 6">仅退款</el-button>
        <el-button size="small" type="success" v-if="scope.row.status === 7">售后</el-button>
        <el-button size="small" type="success" v-if="scope.row.status === 8" @click="begin(scope.row.id)">请求被拒绝
        </el-button>
        <el-button size="small" type="success" v-if="scope.row.status === 9">已退货退款</el-button>
        <el-button size="small" type="success" v-if="scope.row.status === 10">已退款</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination background layout="prev, pager, next" :total="pageInfo.total" :page-size="pageInfo.pageSize"
                 @change="selectByPage"
                 style="margin-top: 15px; display: flex; justify-content: center; align-items: center;"
                 v-model:current-page="pageInfo.pageNum"/>

  <!-- 服务对话框开始 -->
  <el-dialog v-model="addDialogShow" title="请选择服务" width="500">
    <el-form>
      <div>
        <!--退货退款-->
        <el-popconfirm title="你确定要退货退款吗?" confirm-button-text="确定" cancel-button-text="取消"
                       @confirm="update2(a)">
          <template #reference>
            <el-button size="large" type="success">退货退款</el-button>
          </template>
        </el-popconfirm>
        <!--&lt;!&ndash;退换货&ndash;&gt;-->
        <!--<el-popconfirm title="你确定要退换货吗?" confirm-button-text="确定" cancel-button-text="取消"-->
        <!--               @confirm="delete3(order.id)">-->
        <!--  <template #reference>-->
        <!--    <el-button size="large" type="success">退换货</el-button>-->
        <!--  </template>-->
        <!--</el-popconfirm>-->
        <!--仅退款-->
        <el-popconfirm title="你确定要退款吗?" confirm-button-text="确定" cancel-button-text="取消"
                       @confirm="update4(a)">
          <template #reference>
            <el-button size="large" type="success">仅退款</el-button>
          </template>
        </el-popconfirm>
      </div>
    </el-form>
  </el-dialog>
  <!-- 服务对话框结束 -->
</template>

<script setup>
import orderApi from "@/api/orderApi.js";
import {ref} from "vue";
import {useRouter} from "vue-router";
import {ElLoading, ElMessage} from "element-plus";
import goodsApi from "@/api/goodsApi.js";
import commentApi from "@/api/commentApi.js";

const a = ref()
const score = ref(0)
const content=ref()
const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900'])
//是否显示服务对话框
const addDialogShow = ref(false)
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR)
const router = useRouter()
//搜索条件
const condition = ref({
  id: "",
});
//分页信息
const pageInfo = ref({
  pages: 0,
  pageSize: 0,
  pageNum: 0,
})

function begin(id) {
  a.value = id;
  console.log(a.value)
  addDialogShow.value = true;
}

function selectByPage(pageNum) {
  orderApi.selectByPage(condition.value, pageNum, 5)
      .then(resp => {
        console.log(resp.data)
        pageInfo.value = resp.data
      })
}

//订单详情列表
const orderList = ref([])
const idstatus = ref()

function selectById(id) {
  orderApi.selectById(id)
      .then(resp => {
        console.log(resp.data.orderDetailList)
        orderList.value = resp.data.orderDetailList;
        idstatus.value = resp.data.status;
      })
}

selectByPage(1)

//跳转支付页
function toPayPage(id) {
  router.push({
    path: "/user/pay",
    query: {
      orderId: id
    }
  })
}

//点击，状态变成，以收货（点击服务）
function updateStatus(orderId) {
  orderApi.selectById(orderId)
      .then(resp => {
        console.log(orderId)
        console.log(resp.data)
        if (resp.code === 10000) {
          const order = resp.data;
          //设置订单状态为已收货
          order.status = 3;
          // 更新订单状态
          orderApi.update(order)
              .then(resp => {
                if (resp.code === 10000) {
                  ElMessage.success(resp.msg);
                  selectByPage(1);
                } else {
                  ElMessage.error(resp.msg);
                }
              });
        } else {
          ElMessage.error(resp.msg);
        }
      })
}

//申请退货退款
function update2(id) {
  console.log(id)
  orderApi.update2(id)
      .then(resp => {
        if (resp.code === 10000) {
          ElMessage.success(resp.msg);
          addDialogShow.value = false;
          selectByPage(1)
        } else {
          ElMessage.error("申请退货退款失败");
        }
      })
}

//申请仅退款
function update4(id) {
  //console.log(id)
  orderApi.update4(id)
      .then(resp => {
        if (resp.code === 10000) {
          ElMessage.success(resp.msg);
          addDialogShow.value = false;
          selectByPage(1)
        } else {
          ElMessage.error("退款失败");
        }
      })
}
const goodsIdd=ref()

function toCommentPage(goodsId) {
  router.push({
    path: '/user/comment',
    query: {
      goodsId
    }
  })
}
</script>

<style scoped>

</style>